<template>
  <div class="app-container">
    <p style="font-size: 14px;"><b style="font-size: 20px;">收费明细管理</b>用于展示物业收费明细列表信息，以及增加、修改、删除等操作</p>
  <el-card>
    <!-- 搜索框区域 -->
    <el-form label-width="80px" :inline="true" size="normal">
      <el-form-item label="小区名称">
        <el-select
          placeholder=""
          style="width: 150px"
          v-model="formData.community_code"
        >
          <el-option
            v-for="item in ApartmentList"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="收费项目">
        <el-select placeholder="" style="width: 150px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房产信息">
        <el-select placeholder="" style="width: 150px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <div>
          <el-time-picker
            v-model="formData.create_time"
            is-range
            range-separator="To"
            start-placeholder="请选择"
            end-placeholder="请选择"
            style="width: 200px"
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button @click="onReset">重置</el-button>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    </el-card>
    <el-card style="margin-top: 15px;">
    <!-- 新增按钮区域 -->
    <el-row>
      <el-button
        type="primary"
        size="default"
        text
        @click="addRef.isShow = true"
        >新增明细</el-button
      >
    </el-row>
    <br /><br />
    <!-- 表格区域 -->
    <el-table :data="list" style="width: 100%" border="1px solid">
      <el-table-column prop="id" label="ID" width="60" />
      <el-table-column label="小区名称" width="180">
        <template #default="{ row }">
          {{ row.community == null ? "未知" : row.community.name }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="收费项目">
        <template #default="{ row }">
          <!-- {{ row.expenses_project.name }} -->
          {{
            row.expenses_project == null ? "未知" : row.expenses_project.name
          }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="房产信息">
        <template #default="{ row }">
          {{
            row.house == null
              ? "未知"
              : `${row.house.name}栋${row.house.owner_name}`
          }}
        </template>
      </el-table-column>
      <el-table-column prop="amount_total" label="应收金额" />
      <el-table-column prop="amount_paid" label="实收金额" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="create_time" label="创建时间" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button @click="editRow(row.id)" type="success">编辑</el-button>
          <el-popconfirm title="确认删除吗?" @confirm="delRow(row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table> <br>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="currentChange"
      v-model:current-page="formData.current"
      v-model:page-size="formData.pageSize"
      layout="total, prev, pager, next"
      :total="total"
      background
    >
    </el-pagination>

    <!-- 新增区域 -->
    <addForm ref="addRef" @updateList="initData" />
  </el-card>
</div>
<el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import { getSeekList, delSeekList } from "../../../api/seek";
import { formatDateArray } from "../../../utils/changeArr";
import addForm from "./addForm.vue";
import { useApartmentList } from "../../../hooks/index";
// ========================
// 列表数据
const formData = reactive({
  current: 1,
  pageSize: 10,
  create_time: "",
  community_code: "",
  house_code: "",
  expenses_project: "",
});
// 新增
const addRef = ref();

const ApartmentList = useApartmentList();
// 定义总数
const total = ref(0);
// 定义列表数据
const list = ref([]);
// 定义方法
const initData = async () => {
  const res = await getSeekList(formData);
  // 赋值
  list.value = formatDateArray(res.data.rows);
  total.value = res.data.count;
};
// 挂载，调用
onMounted(() => {
  initData();
});

// 页码切换事件
const currentChange = (val) => {
  formData.current = val;
  initData();
};
// 每页数量切换事件
const sizeChange = (val) => {
  formData.pageSize = val;
  initData();
};

// 删除功能
const delRow = async (id) => {
  await delSeekList(id);
  ElMessage.success("删除成功");
  if (formData.current > 1 && list.value.length === 1) formData.current--;
  initData();
};
// 搜索框搜索功能
const onSearch = () => {
  formData.current = 1;
  initData();
};

// 搜索框重置事件
const onReset = () => {
  Object.assign(formData, {
    current: 1,
    pageSize: 10,
    create_time: "",
    community_code: "",
    house_code: "",
    expenses_project: "",
  });
  initData();
};

// 修改功能
const editRow = (id) => {
  addRef.value.replayData(id);
};
</script>

<style scoped>
</style>